<template>
  <div class="content">
    <div class="header">请求IP</div>
    <div class="inner">
      <div class="text">{{ props.data?.text }}</div>
      <div class="btn">合规IP请求</div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  data: {
    type: Object,
  },
});
console.log("props", props.data?.text);
</script>
<style scoped>
.content {
  width: 220px;
  height: 178px;
}
.header {
  width: 220px;
  height: 30px;
  text-align: center;
}
.inner {
  position: relative;
  width: 220px;
  height: 148px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #000;
  font-size: 12px;
}
.text {
}

.btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  width: 100px;
  height: 30px;
  background: #42bb98;
  color: #fff;
  border-radius: 40px;
  line-height: 30px;
  text-align: center;
}
</style>
